<template>
  <!-- 系统公告 -->
  <transition name="slide-fade">
    <div v-if="notice" id="noticeInfo">
      <div class="clearfix" style="width:824px;margin:0 auto;padding-left:90px;">
        <div v-scroll-notice class="ft-lf notice-content clearfix">{{ notice }}</div>
        <span class="ft-lf notice-title"><svg-icon icon-class="notice" />系统公告：</span>
      </div>
    </div>
  </transition>
</template>
<script>
import { noticeInfo } from '@/api/common'
export default {
  directives: {
    scrollNotice: {
      bind: function(el, binding) {
        const childs = el.childNodes
        const maxWidth = 739
        let text

        for (var i = 0, len = childs.length; i < len; i++) {
          if (childs[i].nodeType === 3) {
            text = (childs[i].nodeValue || childs[i].wholeText)
            break
          }
        }

        if (text.length * 14 < maxWidth) {
          return false
        }

        const scrollWrap = document.createElement('div')
        let timer = null
        // const left = 0;

        // c*t/d + b
        let time = 0
        const beginVal = 0
        const changeVal = 10
        const duration = 8.5
        let scrollWrapWidth = 0

        scrollWrap.innerHTML = text + text
        scrollWrap.style.float = 'left'

        el.innerHTML = ''
        el.appendChild(scrollWrap)

        clearTimeout(timer)

        timer = setTimeout(function scrollFn() {
          if (!scrollWrapWidth) {
            scrollWrapWidth = (getComputedStyle(scrollWrap, null)['width'].replace(/px$/g, ''))
          }
          clearTimeout(timer)
          if (Math.abs(parseFloat(getComputedStyle(scrollWrap, null)['marginLeft'])) >= scrollWrapWidth / 2) {
            time = 0
            scrollWrap.style.marginLeft = '0px'
          }
          time++
          scrollWrap.style.marginLeft = -(changeVal * time / duration + beginVal) + 'px'
          timer = setTimeout(scrollFn, 56)
        }, 56)
      }
    }
  },
  data() {
    return {
      notice: ''
    }
  },
  mounted() {
    // const _this = this
    // 系统公告
    setTimeout(() => {
      // this.getNoticeInfo((res) => {
      //   if (res.code === 0) {
      //     if (res.data && res.data.details) {
      //       if (res.data.isAlert === 1) {
      //         this.$nextTick(() => {
      //           this.$alert(res.data.details, '提示', {
      //             confirmButtonText: '确定',
      //             type: 'warning',
      //             callback: action => {
      //               _this.notice = res.data.details
      //             }
      //           })
      //         })
      //       } else {
      //         _this.notice = res.data.details
      //       }
      //     }
      //   }
      // })
    }, 1000)
  },
  methods: {
    getNoticeInfo(callback) {
      noticeInfo().then(res => {
        if (res.code === 0) {
          callback && callback(res)
        }
      })
    }
  }
}
</script>
<style scoped>
#noticeInfo{
  position: fixed;
  top:0px;
  left:0px;
  width:100%;
  height:30px;
  background: rgba(0, 0, 0, .2);
  font-size:14px;
  color:#fff;
  text-align: left;
  line-height: 30px;
}
#noticeInfo svg{
  font-size: 16px;
  font-weight: 700;
  vertical-align: middle;
}
#noticeInfo .notice-content{
  position: relative;
  width:100%;
  overflow: hidden;
  white-space: nowrap;
}
#noticeInfo .notice-title{
  position: relative;
  left: -85px;
  margin-left: -100%;
}
</style>
